<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
</head>

<body>
<input type="hidden" th:value="${plan.getPNo()}" id="planId">
<div style="width: 90%;margin: auto;">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                制作采购清单 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="year">[[${plan.getPDate().getYear()+1900}]]</span>年<span id="month">[[${plan.getPDate().getMonth()+1}]]</span>月
                <button style="float: right; margin-right: 30px;color: #000;" onclick="window.location.href='/showPlans'">返回</button>
            </h3>
        </div>
    </div>
    <div class="htmleaf-container">
        <div class="container" style="margin: 0;width: 100%;">
            <div class="row">
                <div class="col-md-12" style="padding:2em 0;">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="mytable">
                            <thead>
                                <tr>
                                    <td>商品</td>
                                    <td>商品数量</td>
                                    <td>单价(￥)</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="planInfo:${planInfos}">
                                    <td th:text="${planInfo.getGNo()}" class="name"></td>
                                    <td th:text="${planInfo.getPINum()}"></td>
                                    <td th:text="${planInfo.getPrice()}"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-12" style="padding-bottom:2em;">
                    <button class="btn btn-info" id="add"><i class="fa fa-plus"></i> 添加</button>
                </div>
            </div>
        </div>
    </div>
    <div  style="float: right">
                <button  style="float: right;
            background-color: turquoise;
            color: aliceblue;
            border-radius: 5px;
            width: 74px;
            height: 40px;" onclick="subm()">提交</button>
    </div>

</div>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstable.js" th:href="@{/js/bootstable.js}"></script>
<script type="text/javascript">
    var nameList = ['耐克运动鞋','波斯登羽绒服','阿迪短袖','马丁靴','雪碧','可乐','辣条','虾条','百乐钢笔','百乐墨水','橡皮','铅笔'];
    function getId(name) {
        for(var i=0;i<12;i++){
            if(nameList[i]==name) return i+1;
        }
    }
    $('#mytable').SetEditable({
        $addButton: $('#add')
    });
    var names = $(".name")
    var detail = ['耐克运动鞋','波斯登羽绒服','阿迪短袖','马丁靴','雪碧','可乐','辣条','虾条','百乐钢笔','百乐墨水','橡皮','铅笔'];
    for(var i=0;i<names.length;i++){
        $(names[i]).text(detail[Number($(names[i]).text()-1)]);
    }
    function subm(){
        var dataList = [];
        var trs = $("tbody > tr");
        var total = 0;
        for(var i= 0;i<trs.length;i++){
            var tds = $(trs[i]).children("td");
            var id = getId($(tds[0]).text());
            var name = $(tds[0]).text();
            var num = $(tds[1]).text();
            var price = $(tds[2]).text();
            total = total+parseInt(num)*parseFloat(price);
            var str = {"id":id,"name":name,"price":price,"num":num}
            if(num==0) continue;
            dataList.push(str)
        }
        dataList.push("t")
        var year = $("#year").text()
        var month = $("#month").text()
        var name = $("#planId").val()
        var str = {"year":year,"month":month,"worker":name};
        dataList.push(str)
        // alert(JSON.stringify(dataList))
        $.ajax({
                url:"/money",
                type:"post",
                success:function (dataResponse) {
                    var money = dataResponse.money;
                    if(money<total){
                        alert("余额不足")
                        return
                    }else{
                        $.ajax({
                                async: false,
                                url:"/showBuy",
                                type:"post",
                                contentType : "application/json",
                                data:JSON.stringify(dataList),
                                success:function (dataResponse) {

                                },
                                error:function () {
                                    alert("出错了!!!")
                                }
                            }
                        );
                        window.location.href='/lastBuy'
                    }
                },
                error:function (){
                    alert("出错了5")
                },
                dataType:"json"
            }
        );
    }
</script>
</body>
</html>